<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <el-dialog
    class="add_skin_library"
    v-model="props.addVisible"
    :title="modalType === 'edit' ? '修改铺层' : '新增铺层'"
    @close="handleVisible('cancel')"
  >
    <el-form size="small" label-width="120px">
      <el-form-item label="铺层代码">
        <el-input placeholder="请输入" v-model="formData.plyCode" />
      </el-form-item>
      <el-form-item label="材料">
        <el-input placeholder="请输入" v-model="formData.material" />
      </el-form-item>
      <el-form-item label="单层厚度">
        <el-input placeholder="请输入" v-model="formData.thickness" />
      </el-form-item>
      <el-form-item label="是否对称铺层">
        <el-radio-group v-model="formData.symmetrical">
          <el-radio value="1" size="small">是</el-radio>
          <el-radio value="0" size="small">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="PLY1">
        <el-input placeholder="请输入" v-model="formData.PLY1" />
      </el-form-item>
      <el-form-item :label="item.label" :key="item.label" v-for="(item, index) in plys">
        <div class="ply_item">
          <el-input class="ply_input" v-model="formData[item.label]" placeholder="请输入" />
          <el-icon class="ply_icon" @click="removeItem(item)" v-if="index === plys.length - 1"><Remove /></el-icon>
        </div>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button style="width: 100%" type="primary" plain icon="Plus" @click="addPly">添加</el-button>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button size="small" @click="handleVisible('cancel')">取消</el-button>
        <el-button size="small" type="primary" @click="submitAdd"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script name="addSkinLibrary" setup>
import { saveLayer } from '@/api/layerLibrary';

const props = defineProps(['addVisible', 'rowData']);
const emit = defineEmits(['handleEvent']);
const modalType = props?.rowData ? 'edit' : 'add';
const formData = ref({
  plyCode: '',
  material: '',
  thickness: '',
  symmetrical: '0',
  PLY1: ''
});
const plys = ref([]);
if (modalType === 'edit') {
  formData.value = props.rowData;
  formData.value.symmetrical = props.rowData?.symmetrical?.toString();
  if (props.rowData?.data) {
    const dataArr = props.rowData?.data.split(',') || [];
    dataArr.forEach((el) => {
      const length = plys.value.length;
      plys.value.push({ label: `PLY${length + 2}`, value: el });
      formData.value[`PLY${length + 2}`] = el;
    });
  }
}

// 新增ply
const addPly = () => {
  const length = plys.value.length;
  plys.value.push({ label: `PLY${length + 2}`, value: `PLY${length + 2}` });
};
// 删除ply
const removeItem = (data) => {
  // filter不具备响应式
  const resultArr = plys.value.filter((item) => item.label !== data.label);
  plys.value = resultArr;
};
const handleVisible = (type) => {
  if (type === 'cancel') {
    emit('handleEvent', { type: 'close' });
  } else {
    emit('handleEvent', { type: 'refresh' });
  }
};
const submitAdd = () => {
  //处理数据
  let plyData = [];
  plys.value.forEach((el) => {
    plyData.push(formData.value[el.label]);
  });
  plyData.unshift(formData.value.PLY1);
  formData.value.data = plyData.toString();
  if(modalType === 'edit'){
    formData.value.materialId = props?.rowData?.isfdLayupEquivalentMaterialVo?.id;
  }
  saveLayer(formData.value).then((res) => {
    if (res) {
      if (modalType === 'add') {
        ElMessage({ showClose: true, message: '新增成功。', type: 'success' });
      } else {
        ElMessage({ showClose: true, message: '修改成功。', type: 'success' });
      }
      handleVisible();
    }
  });
};
</script> 
<style lang="scss"scoped>
.add_skin_library {
  user-select: none;
  .ply_item {
    width: 100%;
    display: flex;
    align-items: center;
    .ply_icon {
      font-size: 16px;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>